<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Math Facts :: {{ title }} Problem Set #{{ seed}}</title>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
        <style>
            body { font-family: Segoe UI, sans-serif; }
            .centered { text-align: center; width: 100%; }
            .facts { width: 100%; text-align: right; border-collapse: collapse; }
            .facts tr { width: 100%; }
            .facts td { width: 10%; border: 1px solid black; padding: 0.5em; }
            .facts .answer span { display: none; }
            .bottom { border-bottom: 1px solid black; }
            @media print {
              .no-print { display: none; }
            }
        </style>
    </head>
    <body>
        <div style="align: center; width: 100%;">
            <div style="width: 6.5in; margin-left: auto; margin-right: auto;">
                <h3 class="centered">{{ title }} Problem Set: {{ seed }}</h3>
				<table class="facts">
				    {% for row in data %}
				    <tr>
				        {% for cell in row %}
				        <td>
				            <div class="top">
				            	{{ cell.1 }}
				            </div>
				            <div class="bottom">
				                <span class="operator">-</span>
				                {{ cell.0 }}
				            </div>
				            <div class="answer">&nbsp;
				                <span> </span>
				            </div>
				        </td>
				        {% endfor %}
				    </tr>
				    {% endfor %}
				</table>
				<div class="centered no-print">
				  <a href="/Sheets/Subtraction/">Generate a new sheet</a>
				</div>
            </div>
        </div>
    </body>
    
</html>
